<template>
    <el-row type="flex" class="row-bg header-top" justify="space-evenly">
        <el-col :span="2" style="cursor: pointer;" @click="$router.push('/')">
            <img src="./img/logo-334-120.png" style="margin-top:9px">
        </el-col>
        <el-col :span="9" style="margin-left:0px;">
            <div class="input-group mb-3 text-left" style="margin-top:15px">
                <input type="text" class="form-control search-text" v-model="search" placeholder="请输入演出、艺人、场馆名称..."/>
                <span class="input-group-text search-btn" @click="$router.push({path:'/ticketList',query:{'search':search}})">搜索</span>
            </div>
        </el-col>
        <span :span="0"></span>
    </el-row>
</template>
<script setup>
    import {reactive} from 'vue'
    import {useRoute} from 'vue-router'
    let search=reactive(useRoute().query.search);
    
</script>
<style scoped>
.search-text {
        border: 3px solid #ff3c1b;
        width: 485px;
        float: left;
        height: 24px;
        line-height: 24px;
        padding: 17px 10px;
        overflow: hidden;
        color: #666;
        outline: 0;
      }
.search-btn {
        background: #ff3c1b;
        width: 60px;
        height: 40px;
        float: left;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        border: none;
      }
</style>